<template>
    <section class="order-detail-main base-main">
      <!--头部-->
      <div class="head">
        <p>等待买家付款</p>
        <p class="fs10 time">23小时45分后自动关闭</p>
      </div>
      <!--头部-->

      <!--已签收-->
      <div class="sign-for bgcFFF pr" @click="handleToLogistics">
        <span class="icon_ inline-block text-l">
          <i class="iconfont iconkuaidi"></i>
        </span>
        <div class="msg inline-block">
          <p class="color7E82F6">莉萝小已签收</p>
          <p class="fs10 color7A7B82">广东省广州市花都区迎宾大道116号索弗大厦</p>
        </div>
        <i class="pa iconfont icongengduox"></i>
      </div>
      <!--已签收-->

      <!--地址-->
      <div class="add-box bgcFFF">
        <span class="icon_ inline-block text-l">
          <i class="color7E82F6 iconfont icondizhibiaoshix"></i>
        </span>
        <div class="msg inline-block">
          <p>莉萝小 <span class="color45454D">13958483448</span></p>
          <p class="fs10 color7A7B82">广东省广州市花都区迎宾大道116号索弗大厦</p>
        </div>
      </div>
      <!--地址-->

      <!--订单商品信息-->
      <div class="order-detail-box bgcFFF mt10">
        <OrderGood
          :unpaid="unpaid"
          :afterSale="afterSale"
          :goodList="goodList"
          bgc="#ffffff"
          @refund="refund"
          @after-sale="AfterSale"
          lineBottom="true"
        ></OrderGood>

        <div class="msg">
          <p class="fs12 color7A7B82">
            <span>商品总价</span>
            <span>￥320.00</span>
          </p>
          <p class="fs12 color7A7B82">
            <span>运费</span>
            <span class="">￥0.00</span>
          </p>
          <p class="fs14"><span>订单总价</span> <span>￥0.00</span></p>
          <p class="line-top">
            <span>需付款</span>
            <span class="colorF54E4E">￥320.00</span>
          </p>
        </div>
      </div>
      <!--订单商品信息-->

      <!--订单号-->
      <div class="order-number bgcFFF mt10">
        <p class="fs12 color7A7B82">
          订单编号：{{orderNumber}}
          <span
           class="base-btn-copy flr inline-block text-c fs12"
            v-clipboard:copy="orderNumber"
            v-clipboard:success="onCopy"
            v-clipboard:error="onError">复制</span>
        </p>
        <p class="fs12 color7A7B82">创建时间：2018-04-04 16:40:30</p>
        <p class="fs12 color7A7B82">付款时间：2018-04-04 16:40:30</p>
        <p class="fs12 color7A7B82">发货时间：2018-04-04 16:40:30</p>
      </div>
      <!--订单号-->

      <!--按钮-->
      <div class="btn-box line-top bgcFFF mt10 text-r">
        <span class="inline-block fs14 text-c" @click="handleCancel">取消订单</span>
        <span class="inline-block fs14 text-c style-pay">去付款</span>
      </div>
      <div class="btn-box line-top bgcFFF mt10 text-r">
        <span class="inline-block fs14 text-c" @click="handleRefund">申请退款</span>
      </div>
      <div class="btn-box line-top bgcFFF mt10 text-r">
        <span class="inline-block fs14 text-c" @click="handleToLogistics">查看物流</span>
        <span class="inline-block fs14 text-c" @click="handleRefund">申请退款</span>
        <span class="inline-block fs14 text-c style-pay">确认收货</span>
      </div>
      <div class="btn-box line-top bgcFFF mt10 text-r">
        <span class="inline-block fs14 text-c"  @click="handleDel">删除订单</span>
      </div>
      <!--按钮-->

      <div class="cancel-order-box">
        <van-popup
          v-model="isCancelPop"
          position="bottom">
          <div class="cancel-box pr">
            <p class="title text-c line-bottom color7A7B82">
              取消订单
              <i class="pa iconfont iconcha" @click="isCancelPop=false"></i>
            </p>
            <div class="reason-list">
              <van-checkbox-group v-model="result">
                <van-cell
                  v-for="(item,index) in reasonList"
                  :key="index"
                  :title="item.text"
                  @click="toggle(index)">
                  <van-checkbox :name="item.id" ref="checkboxes" />
                </van-cell>
              </van-checkbox-group>
            </div>

            <div class="btn text-c pa bgcFFF">
              <span class="base-btn" @click="handleSub">确定</span>
            </div>
          </div>
        </van-popup>
      </div>

    </section>
</template>

<script type="text/ecmascript-6">
  import OrderGood from  '../../components/OrderGood.vue'

  export default {
    components:{
      OrderGood,
    },
    data() {
      return {
        goodList:[
          {
            goodName:'商品名称11',
            goodModel:'商品规格11',
            price:'80.00',
            goodNum:2,
            imgPath:'https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=130623978,3345737307&fm=85&app=63&f=JPG?w=121&h=75&s=7B84F70E594ECCCE50FDA96E0300607B'
          },
          {
            goodName:'商品名称22',
            goodModel:'商品规格22',
            price:'80.00',
            goodNum:2,
            imgPath:'https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=130623978,3345737307&fm=85&app=63&f=JPG?w=121&h=75&s=7B84F70E594ECCCE50FDA96E0300607B'
          },
        ],
        orderNumber:'5702315783295692',//复制订单编号
        isCancelPop:false,//取消订单弹窗
        titleText:'取消订单',
        closeText:'确定',
        reasonList:[
          {
            id:1,
            text:'拍错了，重新拍'
          },
          {
            id:2,
            text:'我不想买了'
          },
          {
            id:3,
            text:'卖家缺货'
          },
          {
            id:4,
            text:'其他原因'
          },
          {
            id:2,
            text:'我不想买了'
          },
          {
            id:2,
            text:'我不想买了'
          },
          {
            id:2,
            text:'我不想买了'
          },
          {
            id:2,
            text:'我不想买了'
          },
        ],
        result:[],
        unpaid:this.$route.query.unpaid,
        afterSale:this.$route.query.afterSale,

      }
    },
    created(){

    },
    methods: {
      //取消订单
      handleCancel(){
        this.isCancelPop = true;
      },
      toggle(index) {
        this.$refs.checkboxes[index].toggle();
        console.log(this.result);
      },
      //确定取消订单
      handleSub(){
        if(this.result.length <= 0){
          this.$toast('请选择理由后再确定')
        }else{
          this.$toast('取消成功')
        }
      },
      //删除订单
      handleDel(){
        this.$dialog.alert({
          showCancelButton:true,
          title: '',
          message: '确认删除订单？'
        }).then(() => {
          // on close
          this.$toast('删除成功')
        }).catch(() => {

        })

      },
      //申请退款
      refund(){

      },
      //申请售后
      AfterSale(){

      },
      //物流详情
      handleToLogistics(){
        this.$router.push({
          path:'/index/web/logisticsDetail'
//          query:{id:0}
        })
      },
      //申请售后
      handleRefund(){

      },
      //复制成功
      onCopy(e){
        console.log(e);
        this.$toast('复制成功')
      },
      onError(e){
        console.log(e);
        this.$toast('复制失败')
      }
    },
  }
</script>

<style lang="scss" scoped>
  @import '../../assets/css/orderDetail';
</style>
